---
name: useSearch
route: /useSearch
menu: 'UI'
edit: false
sidebar: true
---
import JackBox from 'jackbox';

import Demo1 from './demo/demo1';
import Demo1CodeTsx from '!raw-loader!./demo/demo1.tsx';
import Demo1CodeJsx from '!raw-loader!./demo/demo1.jsx';

import Demo2 from './demo/demo2';
import Demo2CodeJsx from '!raw-loader!./demo/demo2.jsx';
import Demo2CodeTsx from '!raw-loader!./demo/demo2.tsx';

# useSearch

Applicable to typing while searching scenario.

**Core Characteristics**

* Async request control(loading, request timing control, etc)
* Debouncing
* Auto cleanup when unmount

## Examples

### Select Search
<JackBox jsCode={Demo1CodeJsx} tsCode={Demo1CodeTsx} demoName='Select Search' description='Common Select with asynchronous search'>
  <Demo1 />
</JackBox>

### Input Search
<JackBox jsCode={Demo2CodeJsx} tsCode={Demo2CodeTsx} demoName='Input Search' description='Complex Input search scenario, use deps properly'>
  <Demo2 />
</JackBox>

## API

```javascript
const result: Result = useSearch<T>(
  asyncFn: (value: any) => Promise<T>,
  options?: Options,
);

const result: Result = useSearch<T>(
  asyncFn: (value: any) => Promise<T>,
  deps?: any[],
  options?: Options,
);
```

### Result

| Property | Description                                         | Type                 |
|----------|-----------------------------------------------------|----------------------|
| data     | Search result data                                  | any                  |
| loading  | Loading status                                      | boolean              |
| onChange | Trigger asyncFn, the parameters are sent to asyncFn | (value: any) => void |
| value    | onChange parameters                                 | -                    |
| cancel   | Cancel the ongoing request and debounce in the wait | () => void           |
| run      | Re-execute the asyncFn with the current value       | () => void           |

### Params

| Property | Description                                                        | Type                   | Default |
|----------|--------------------------------------------------------------------|------------------------|---------|
| asyncFn  | Async request function, parameter is onChange's value              | (value: any)=> Promise | -       |
| deps     | Depends on the array, if the deps changes, it will trigger asyncFn |                        |         |
| any[]    | []                                                                 |                        |         |
| options  | Optional configuration item, see Options                           | -                      | -       |


### Options

| Property | Description       | Type   | Default |
|----------|-------------------|--------|---------|
| wait     | Debounce interval | number | 300     |